//1. 当页面滚动大于 300像素，就显示 电梯导航(.xtx-elevator)
const elevator = document.querySelector('.xtx_header')
const sct = document.querySelector('.header_fixed')
const scroll1 = sct.offsetTop
window.addEventListener('scroll',function(){
  if (document.documentElement.scrollTop> scroll1){
     elevator.style.top = '0px'
  }
  else {
      elevator.style.top = '50px'
  }
})
// 放大镜
const mpic = document.querySelector('.middle>img')
const allLis = document.querySelectorAll('.small>ul li')
const large = document.querySelector('.large')
const middle = document.querySelector('.middle')

  for(let i =0;i<allLis.length;i++){
    allLis[i].addEventListener('mouseenter',function(){
      document.querySelector('.small>ul>li.active').classList.remove('active')
      allLis[i].classList.add('active')
      mpic.src = allLis[i].children[0].src
      large.style.backgroundImage = `url(${allLis[i].children[0].src})`
    })
    
  }
  const layer = document.querySelector('.layer')
   middle.addEventListener('mouseenter',function(){
     layer.style.display = 'block'
     large.style.display = 'block'
   })
   middle.addEventListener('mouseleave',function(){
     layer.style.display = 'none'
     large.style.display = 'none'
   })
   middle.addEventListener('mousemove',function(e){
    let a = e.pageX - middle.parentNode.offsetLeft - layer.offsetWidth / 2
    let b = e.pageY - middle.parentNode.offsetTop - layer.offsetHeight / 2
    if(a<0){
       a=0
    }
    if(b<0){
      b = 0
    }
    if(a>middle.offsetWidth - layer.offsetWidth){
       a = middle.offsetWidth - layer.offsetWidth
    }
    if(b>middle.offsetHeight - layer.offsetHeight){
       b = middle.offsetHeight - layer.offsetHeight
    }
    layer.style.left = a  + 'px'
    layer.style.top = b + 'px'
    large.style.backgroundPosition = `${-2*a}px ${-2*b}px`
  })
  // 添加
  const add = document.querySelector('#add')
                      const reduce = document.querySelector('#reduce')
                      const total = document.querySelector('#total')
                      const btn = document.querySelector('.item>.buy')
                      let res = 1
                      add.addEventListener('click', function () {
                        res++
                        total.value = res
                        reduce.disabled = false
                      })
                      reduce.addEventListener('click', function () {
                        res--
                        total.value = res
                        if(res - 1 === -1){
                          reduce.disabled = true
                        }
                      })
                      // 购物车
                      const car = document.querySelector('.xtx_search .xtx_search_cart')
                      car.addEventListener('click',function(){
                        car.href = `Order page.html`
                      })
                      
                        const btn2 = document.querySelector('.attrs>.item .buy')
                        btn2.addEventListener('click',function(){
                        if(res<1){
                          alert('添加失败，请确认输入数量是否正确')
                          
                        }
                        else {
                          alert('成功添加至购物车')
                        }
                      })
                         
                      
                      